import React from 'react';
import { connect } from 'dva';
import { Card, Row, Col } from 'choerodon-ui';
import styles from './style.less';


class ExceptionMessage extends React.Component {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'produceDashboard/fetchExceptionMessage',
    });
  }

  render() {
    const { exceptionMessage } = this.props.produceDashboard;
    return (
      <Card bordered={false}>
        <div className={styles['exception-message']}>
          <div className={styles.title}>异常信息</div>
          <div className={styles['message-content']}>
            {
              exceptionMessage.map(item => (
                <div className={styles['message-detail']}>
                  <Row align="middle">
                    <Col span={8}>
                      {
                        item.type === 'normal' && <span className={styles.dotted} style={{ background: '#38C678' }} />
                      }
                      {
                        item.type === 'error' && <span className={styles.dotted} style={{ background: '#FD6868' }} />
                      }
                      {
                        item.type === 'warning' && <span className={styles.dotted} style={{ background: '#F5B104' }} />
                      }
                      <span>{item.name}</span>
                    </Col>
                    <Col span={8} style={{ textAlign: 'right' }}>
                      {item.reason}
                    </Col>
                    <Col span={8} style={{ textAlign: 'right' }}>
                      {item.date}
                    </Col>
                  </Row>
                </div>
              ))
            }
          </div>
        </div>
      </Card>
    );
  }
}

export default connect(
  ({ produceDashboard }) => ({
    produceDashboard,
  })
)(ExceptionMessage);
